<template>
  <!-- 财务统计--总额统计 -->
  <div class="item">
    <div class="titleBox">
      <div class="dot"></div>
      <p class="name">总额统计</p>
    </div>
    <div class="content">
      <div class="countBox">
        <div class="countItem">
          <p class="name">应收总额（元）</p>
          <p class="num" style="color: #0e46d7">
            {{ countData.planYearMoney ?? 0 }}
          </p>
        </div>
        <div class="countItem">
          <p class="name">实收总额（元）</p>
          <p class="num" style="color: #2fcc71">
            {{ countData.customerPaymentYearMoney ?? 0 }}
          </p>
        </div>
      </div>
      <div class="charts">
        <scEcharts height="250px" :option="option"></scEcharts>
      </div>
    </div>
  </div>
</template>
<script>
import scEcharts from '@/components/scEcharts'
export default {
  name: 'totalMoney',
  components: {
    scEcharts
  },
  data () {
    return {
      value: 50,
      option: {
        title: {
          text: `{a|0%}\n{b|回头率}`,
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#2CABFF',
            rich: {
              a: {
                fontSize: 28,
                fontWeight: 'bold',
                padding: [0, 0, 14, 0]
              },
              b: {
                fontSize: 14,
              },
            }
          }
        },
        series: [{
          type: 'gauge',
          radius: '80%',
          clockwise: true,
          startAngle: '90',
          endAngle: '-269.9999',
          splitNumber: 50,
          detail: {
            offsetCenter: [0, -20],
            formatter: ' '
          },
          pointer: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0 / 100, {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#2CABFF'
                  }, {
                    offset: 0.5,
                    color: '#8AE1A2'
                  },
                  {
                    offset: 1,
                    color: '#FDFF45'
                  }
                  ]
                }],
                [1, "#00ffb430"]
              ],
              width: 35
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            length: 35,
            distance: -35,
            lineStyle: {
              color: '#fff',
              width: 3
            }
          },
          axisLabel: {
            show: false
          },
        },
        {
          type: 'pie',
          name: '内层细圆环',
          radius: ['48%', '50%'],
          hoverAnimation: false,
          startAngle: 200,
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#30AEFC80' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#7FDDAD30' // 100% 处的颜色
                }],
              }
            }
          },
          label: {
            show: false
          },
          data: [100]
        }
        ]
      }
    }
  },
  props: {
    countData: {
      type: Object, default: () => { }
    }
  },
  watch: {
    countData (newVal) {
      if (newVal) {
        let value = 0
        if (newVal.planYearMoney != 0) {
          value = ((newVal.customerPaymentYearMoney / newVal.planYearMoney) * 100).toFixed(1)
        }
        this.option.title.text = `{a|${value}%}\n{b|回款率}`
        this.option.series[0].axisLine.lineStyle.color = [
          [value / 100, {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#2CABFF'
            }, {
              offset: 0.5,
              color: '#8AE1A2'
            },
            {
              offset: 1,
              color: '#FDFF45'
            }
            ]
          }],
          [1, "#00ffb430"]
        ],
          console.log(this.option)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  padding: 20px;
  margin-right: 20px;
  flex-basis: calc(100% / 2);
  // min-width: 600px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.1);
  .dot {
    display: inline-block;
    width: 6px;
    height: 16px;
    vertical-align: middle;
    background: #1481f4;
  }
  .name {
    display: inline-block;
    margin-left: 10px;
    font-size: 18px;
    vertical-align: middle;
  }
  .content {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
  }
  .countBox {
    width: 40%;
    min-width: 300px;
    margin-top: 20px;
  }
  .countItem {
    display: flex;
    align-items: center;
    // justify-content: center;
    margin-bottom: 40px;
    margin-left: 60px;
    .name {
      margin-right: 10px;
      font-size: 16px;
      color: #666;
      white-space: nowrap;
    }
    .num {
      font-weight: 600;
      font-size: 28px;
    }
  }
  .charts {
    width: 60%;
    min-width: 300px;
    margin-top: -20px;
  }
}
</style>